<template>
  <div>
    <div class="center">
      <div :class="['center-item',curTab === index ? 'crad-active' : '']" v-for="(item, index) in cateLists" :key="index" @click="changeItem(index)">
        <div>
          <span class="num">{{ item.num }}</span
          ><span class="cam">{{ item.cam }}</span>
        </div>
        <div>
          <span class="title">{{ item.title }}</span>
        </div>
      </div>
    </div>
    <MouldBox
      :chartOption="chartOption"
      :datas="lists"
      :text="text"
      :isLine="false"
      height="7.8125rem"
    ></MouldBox>
  </div>
</template>

<script>
import MouldBox from '../common/MouldBox.vue';
export default {
  data() {
    return {
      chartOption: {
        color: ['#01CEE9'],
        area: false,
        unit: '次数'
      },
      lists: [
        { x: '12-01', y: 75, s: '进尺' },
        { x: '12-06', y: 30, s: '进尺' },
        { x: '12-11', y: 60, s: '进尺' },
        { x: '12-16', y: 37, s: '进尺' },
        { x: '12-21', y: 79, s: '进尺' },
        { x: '12-26', y: 42, s: '进尺' },
        { x: '12-31', y: 67, s: '进尺' }
      ],
      curTab: 0,
      text: ['钻探次数']
    };
  },

  components: {
    MouldBox
  },

  computed: {
    cateLists() {
      return [
        { num: 412, title: '钻探次数', cam: '次' },
        { num: 523, title: '钻探孔数', cam: '个' },
        { num: 93, title: '钻探进尺', cam: '米' }
      ];
    }
  },

  methods: {
    changeItem(index) {
      this.curTab = index;
      this.chartOption.unit = this.cateLists[index].cam;
      this.text.splice(0, 1);
      this.text.push(this.cateLists[index].title);
    }
  }
};
</script>
<style scoped lang="scss">
.center {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  .center-item {
    width: 6.25rem;
    height: 3.125rem;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.25rem;
    color: #E8E8E8;
    background-color: #1d2e45;
    border-radius: 0.25rem;
    margin-bottom: 0.625rem;
    padding: 0.375rem 0;
    box-sizing: border-box;
    .num {
      margin-right: 0.3125rem;
    }
    .title {
      color: #d5d7d9;
    }
  }
  .crad-active{
    color: #1ed9ff;
    border-bottom: .1875rem solid #1ed9ff;
  }
}
</style>
